<template>
	<view class="layout">
		<view class="card" v-for="item in noticeList" :key="item.id">
			<view class="center" @click="navigationUrl(item)">
				<view class="left">
					<view class="dept"> {{ item.createPerson }} </view>
					<view class="title">{{ item.title }}</view>
				</view>
				<view class="right">
					<image :src="item.image" alt="" />
				</view>
			</view>
			<view class="bottom">
				<view class="time">{{ item.createTime }}</view>
				<view class="read">已阅读：{{ item.viewCount }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getNews, addView } from '@/api/list.js'
import { onShow } from "@dcloudio/uni-app"
import { ref } from 'vue';
const noticeList = ref([])

const navigationUrl = (item) => {
	addView({ id: item.id }).then(() => {
		uni.navigateTo({
			url: `/pages/web-view/index?url=${item.url}`,
		})
	})

}

const getNoticeList = () => {
	getNews().then(res => {
		noticeList.value = res.data
	})
}
// 页面显示
onShow(() => {
	getNoticeList()
})
</script>

<style lang="less" scoped>
.card {
	height: 280rpx;
	padding: 30rpx;
	margin: 32rpx 24rpx;
	border-radius: 37rpx;
	box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.16);

	.center {
		display: flex;

		.left {
			flex: 1;
			font-size: 36rpx;

			.dept {
				font-size: 28rpx;
				margin: 0 20rpx 20rpx;
			}

			.title {
				width: 90%;
				margin: 10rpx;
				color: gray;
				font-size: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}

		.right {
			width: 218rpx;
			height: 218rpx;
			border-radius: 32rpx;
			overflow: hidden;
			box-shadow: 0 3rpx 5rpx rgba(0, 0, 0, 0.16);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 20rpx;
		font-size: 26rpx;

		.time {
			color: gray;
		}

		.read {
			color: #B10D0C;
		}
	}
}
</style>